<template>
  <Row>
    <Col :span="3">
      <hierTree
        :data="data"
        v-bind="treeAttrs"
        :ref="'tree'"
        @select="select"
        @add="add"
        @remove="remove"
        @menu="menu"
      ></hierTree>
    </Col>
    <Col :span="21">
      <Tabs
        v-if="current"
        name="modal"
        v-model="tabname"
        type="card"
        style="height: 100%"
      >
        <TabPane tab="modal" label="basic" name="1" context-menu>
          <cfg-form :ref="'idForm'" v-bind="idAttrs" :data="current"></cfg-form>
          <cfg-form
            :ref="'basicForm'"
            v-bind="basicAttrs"
            :data="current.svg"
          ></cfg-form>
        </TabPane>
        <TabPane tab="modal" label="fills" name="2" context-menu>
          <fill-config :current="current"></fill-config>
        </TabPane>
        <TabPane tab="modal" label="filters" name="3" context-menu>
          <filter-config :current="current"></filter-config>
        </TabPane>
        <TabPane tab="modal" label="groups" name="4" context-menu>
          <group-config :current="current"></group-config>
        </TabPane>
        <TabPane tab="modal" label="elements" name="5" context-menu>
          <element-config :current="current"></element-config>
        </TabPane>
        <TabPane tab="modal" label="animations" name="6" context-menu>
          <animation-config :current="current"></animation-config>
        </TabPane>
      </Tabs>
    </Col>
  </Row>
</template>

<script>
import AnimationConfig from "./configParts/animation-config.vue";
import ElementConfig from "./configParts/element-config.vue";
import FillConfig from "./configParts/fill-config.vue";
import FilterConfig from "./configParts/filter-config.vue";
import GroupConfig from "./configParts/group-config.vue";
export default {
  name: "",
  components: {
    FillConfig,
    AnimationConfig,
    FilterConfig,
    ElementConfig,
    GroupConfig,
  },
  data() {
    return {
      current: null,
      tabname: "1",
    };
  },
  props: {
    data: {
      default: () => {
        return [];
      },
    },
  },
  watch: {},
  computed: {
    treeAttrs() {
      return {
        title: {
          "en-US": "Svg List",
          "zh-CN": "Svg List",
        }[this.G_Locale],
        rootId: null,
        nameId: "id",
        namePid: "parentId",
        nameTitle: "id",
        rootEnable: true,
        menuEnable: true,
        addEnable: true,
        removeEnable: true,
        menus: [],
      };
    },
    idAttrs() {
      return {
        labelWidth: 100,
        labelPosition: "right",
        cols: 2,
        columns: [
          {
            key: "id",
            title: "id",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "text",
            },
          },
        ],
        rules: {
          id: [{ required: true, message: "请输入所属类型", trigger: "blur" }],
        },
        onlyRead: false,
      };
    },
    basicAttrs() {
      return {
        labelWidth: 100,
        labelPosition: "right",
        cols: 2,
        columns: [
          {
            key: "width",
            title: "宽度",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "height",
            title: "高度",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "x",
            title: "x",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "y",
            title: "y",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "number",
            },
          },
          {
            key: "draggable",
            title: "可拖拽",
            minWidth: 100,
            align: "center",
            show: true,
            config: {
              type: "switch",
            },
          },
        ],
        rules: {
          type: [
            { required: true, message: "请输入所属类型", trigger: "blur" },
          ],
          className: [
            { required: true, message: "请输入模型类名", trigger: "blur" },
          ],
        },
        onlyRead: false,
      };
    },
  },
  created() {},
  mounted() {},
  methods: {
    select(item) {
      this.current = null;
      if (item.id == null) return;
      this.$nextTick(() => {
        this.current = item;
      });
    },
    add(item) {
    //   let data = this.tools.lodash.cloneDeep(this.data);
    //   data.push(this.tpl());
    //   this.data.splice(0, this.data.length);
    //   this.$nextTick(() => {
    //     this.data.push(...data);
    //   });
    this.data.push(this.tpl());
      
    },
    remove(item) {
      this.data.splice(this.data.indexOf(item), 1);
      this.current = null;
    },
    menu(menu, item) {},
    setTree(fn) {
      this.$refs.tree.$children[0].setTree(fn);
    },
    tpl() {
      return {
        id: "newSvg",
        svg: {
          width: 500,
          height: 500,
          x: 0,
          y: 0,
          draggable: true,
        },
        animations: [
          {
            id: "animate1",
            type: "animate",
            params: {
              attributeName: "fill",
              from: "white",
              to: "green",
              dur: "2s",
              fill: "freeze",
              repeatCount: "indefinite",
              repeatDur: "indefinite",
              begin: "click+2s",
              calcMode: "linear",
              keyTimes: "0;0.5;1",
              values: "10;50;20",
              href: "rect",
            },
          },
        ],
        fills: [
          {
            id: "linear1",
            type: "linear",
            values: {
              x1: "0%",
              y1: "0%",
              x2: "100%",
              y2: "0%",
              stops: [
                { pos: "0%", color: "gray", opacity: 1 },
                { pos: "40%", color: "white", opacity: 1 },
                { pos: "70%", color: "gray", opacity: 1 },
                { pos: "90%", color: "white", opacity: 1 },
                { pos: "100%", color: "gray", opacity: 1 },
              ],
            },
          },
          {
            id: "radial1",
            type: "radial",
            values: {
              cx: "70%",
              cy: "50%",
              r: "50%",
              fx: "50%",
              fy: "50%",
              stops: [
                { pos: "0%", color: "gray", opacity: 1 },
                { pos: "40%", color: "white", opacity: 1 },
                { pos: "70%", color: "gray", opacity: 1 },
                { pos: "90%", color: "white", opacity: 1 },
                { pos: "100%", color: "gray", opacity: 1 },
              ],
            },
          },
        ],
        filters: [
          {
            id: "point1",
            type: "point",
            values: {
              x: 0,
              y: 0,
              lx: 50,
              ly: 50,
              lz: 30,
              color: "white",
              fill: "green",
              scale: 2,
              constant: 0.8,
            },
          },
        ],
        groups: [{ id: "1", fill: "", opacity: 1, fillId: "linear1" }],
        elements: [
          {
            id: "rect",
            groupId: "1",
            type: "rect",
            values: {
              x: 0,
              y: 0,
              rx: 20,
              ry: 20,
              width: 100,
              height: 100,
              stoke: "",
              fillId: "linear1",
              fill: "green",
              filter: "point1",
              "stoke-width": 0,
            },
          },
        ],
      };
    },
    // wholeTpl() {
    //   return {
    //     svgList: [
    //       {
    //         svg: {
    //           id: "svg1",
    //           width: 500,
    //           height: 500,
    //           x: 0,
    //           y: 0,
    //           draggable: true,
    //         },
    //         animations: [
    //           {
    //             id: "animate1",
    //             type: "animate",
    //             params: {
    //               attributeName: "fill",
    //               from: "white",
    //               to: "green",
    //               dur: "2s",
    //               fill: "freeze",
    //               repeatCount: "indefinite",
    //               repeatDur: "indefinite",
    //               begin: "click+2s",
    //               calcMode: "linear",
    //               keyTimes: "0;0.5;1",
    //               values: "10;50;20",
    //               href: "rect",
    //             },
    //           },
    //           {
    //             id: "tranform1",
    //             type: "translate",
    //             params: {
    //               from: "50",
    //               to: "100",
    //               dur: "2s",
    //               fill: "freeze",
    //               repeatCount: "indefinite",
    //               repeatDur: "6s",
    //               begin: "click+2s",
    //               calcMode: "linear",
    //               keyTimes: "0;0.5;1",
    //               values: "10;50;20",
    //               href: "rect",
    //             },
    //           },
    //           {
    //             id: "motion",
    //             type: "motion",
    //             params: {
    //               path: "50",
    //               dur: "2s",
    //               fill: "freeze",
    //               repeatCount: "infinite",
    //               repeatDur: "6s",
    //               begin: "click+2s",
    //               calcMode: "linear",
    //               keyTimes: "0;0.5;1",
    //               values: "10;50;20",
    //               href: "rect",
    //             },
    //           },
    //         ],
    //         fills: [
    //           {
    //             id: "linear1",
    //             type: "linear",
    //             values: {
    //               x1: "0%",
    //               y1: "0%",
    //               x2: "100%",
    //               y2: "0%",
    //               stops: [
    //                 { pos: "0%", color: "gray", opacity: 1 },
    //                 { pos: "40%", color: "white", opacity: 1 },
    //                 { pos: "70%", color: "gray", opacity: 1 },
    //                 { pos: "90%", color: "white", opacity: 1 },
    //                 { pos: "100%", color: "gray", opacity: 1 },
    //               ],
    //             },
    //           },
    //           {
    //             id: "radial1",
    //             type: "radial",
    //             values: {
    //               cx: "70%",
    //               cy: "50%",
    //               r: "50%",
    //               fx: "50%",
    //               fy: "50%",
    //               stops: [
    //                 { pos: "0%", color: "gray", opacity: 1 },
    //                 { pos: "40%", color: "white", opacity: 1 },
    //                 { pos: "70%", color: "gray", opacity: 1 },
    //                 { pos: "90%", color: "white", opacity: 1 },
    //                 { pos: "100%", color: "gray", opacity: 1 },
    //               ],
    //             },
    //           },
    //         ],
    //         filters: [
    //           {
    //             id: "point1",
    //             type: "point",
    //             values: {
    //               x: 0,
    //               y: 0,
    //               lx: 50,
    //               ly: 50,
    //               lz: 30,
    //               color: "white",
    //               fill: "green",
    //               scale: 2,
    //               constant: 0.8,
    //             },
    //           },
    //         ],
    //         groups: [
    //           { id: "1", fill: "", opacity: 1, fillId: "linear1" },
    //           { id: "2", fill: "blue", opacity: 1 },
    //         ],
    //         elements: [
    //           {
    //             id: "rect",
    //             groupId: "1",
    //             type: "rect",
    //             values: {
    //               x: 0,
    //               y: 0,
    //               rx: 20,
    //               ry: 20,
    //               width: 100,
    //               height: 100,
    //               stoke: "",
    //               // fillId:'linear1',
    //               // fill:'green',
    //               filter: "point1",
    //               "stoke-width": 0,
    //             },
    //           },
    //           {
    //             id: "semiCircle",
    //             groupId: "1",
    //             type: "semiCircle",
    //             values: {
    //               x: 100,
    //               y: 100,
    //               width: 200,
    //               height: 100,
    //               stoke: "",
    //               // fillId:'linear1',
    //               // fill:'green',
    //               filter: "point1",
    //               "stoke-width": 0,
    //             },
    //           },
    //         ],
    //       },
    //       {
    //         svg: {
    //           id: "svg2",
    //           width: 500,
    //           height: 500,
    //           x: 0,
    //           y: 0,
    //           draggable: true,
    //         },
    //         animations: [],
    //         fills: [
    //           {
    //             id: "linear1",
    //             type: "linear",
    //             values: {
    //               x1: "0%",
    //               y1: "0%",
    //               x2: "100%",
    //               y2: "0%",
    //               stops: [
    //                 { pos: "0%", color: "gray", opacity: 1 },
    //                 { pos: "40%", color: "white", opacity: 1 },
    //                 { pos: "70%", color: "gray", opacity: 1 },
    //                 { pos: "90%", color: "white", opacity: 1 },
    //                 { pos: "100%", color: "gray", opacity: 1 },
    //               ],
    //             },
    //           },
    //           {
    //             id: "linear2",
    //             type: "linear",
    //             values: {
    //               x1: "0%",
    //               y1: "0%",
    //               x2: "0%",
    //               y2: "100%",
    //               stops: [
    //                 { pos: "0%", color: "gray", opacity: 1 },
    //                 { pos: "40%", color: "white", opacity: 1 },
    //                 { pos: "70%", color: "gray", opacity: 1 },
    //                 { pos: "90%", color: "white", opacity: 1 },
    //                 { pos: "100%", color: "gray", opacity: 1 },
    //               ],
    //             },
    //           },
    //           {
    //             id: "radial1",
    //             type: "radial",
    //             values: {
    //               cx: "70%",
    //               cy: "50%",
    //               r: "50%",
    //               fx: "50%",
    //               fy: "50%",
    //               stops: [
    //                 { pos: "0%", color: "gray", opacity: 1 },
    //                 { pos: "40%", color: "white", opacity: 1 },
    //                 { pos: "70%", color: "gray", opacity: 1 },
    //                 { pos: "90%", color: "white", opacity: 1 },
    //                 { pos: "100%", color: "gray", opacity: 1 },
    //               ],
    //             },
    //           },
    //         ],
    //         filters: [
    //           {
    //             id: "point1",
    //             type: "point",
    //             values: {
    //               x: 0,
    //               y: 0,
    //               lx: 50,
    //               ly: 50,
    //               lz: 30,
    //               color: "white",
    //               fill: "green",
    //               scale: 2,
    //               constant: 0.8,
    //             },
    //           },
    //         ],
    //         groups: [
    //           { id: "1", fill: "", opacity: 1, fillId: "" },
    //           { id: "2", fill: "blue", opacity: 1 },
    //         ],
    //         elements: [
    //           {
    //             id: "rect",
    //             groupId: "1",
    //             type: "rect",
    //             values: {
    //               x: 0,
    //               y: 0,
    //               rx: 0,
    //               ry: 0,
    //               width: 300,
    //               height: 100,
    //               stoke: "",
    //               fillId: "linear2",
    //               // fill:'green',
    //               filter: "point1",
    //               "stoke-width": 0,
    //             },
    //           },
    //           {
    //             id: "polygon",
    //             groupId: "1",
    //             type: "polygon",
    //             values: {
    //               x1: 0,
    //               y1: 0,
    //               x2: 50,
    //               y2: 200,
    //               x3: 100,
    //               y3: 200,
    //               x4: 150,
    //               y4: 0,
    //               stoke: "",
    //               fillId: "linear1",
    //               fill: "green",
    //               filter: "point1",
    //               "stoke-width": 0,
    //             },
    //           },
    //           {
    //             id: "ellipse",
    //             groupId: "1",
    //             type: "ellipse",
    //             values: {
    //               cx: 100,
    //               cy: 50,
    //               rx: 50,
    //               ry: 25,
    //               stoke: "",
    //               fillId: "linear1",
    //               fill: "green",
    //               filter: "point1",
    //               "stoke-width": 0,
    //             },
    //           },
    //           {
    //             id: "text",
    //             groupId: "1",
    //             type: "text",
    //             values: {
    //               x: 0,
    //               y: 0,
    //               "font-family": "Arial",
    //               "font-size": 250,
    //               stoke: "",
    //               fillId: "linear1",
    //               fill: "green",
    //               filter: "point1",
    //               "stoke-width": 0,
    //               "text-anchor": "start",
    //               text: "abc",
    //             },
    //           },
    //         ],
    //       },
    //     ],
    //   };
    // },
  },
};
</script>
<style scoped>
</style>